<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="root">
        <div v-for="(item, index) in arr" :key="index">
            <input type="checkbox" v-model="item.check">
            <span style="width: 100px; display:inline-block;">{{item.name}}</span>
            --<span>${{item.price}}</span>
            --<button @click="jian(item)">减</button>
            <span>{{item.num}}<span>
                    <button @click="jia(item)">加</button>
                    <span> --小计{{item.price*item.num}} </span>
        </div>
        全选 <input type="checkbox" v-model="allCheck" @click="changeCheck">
        总价 $<span>{{allPrice}}</span>
    </div>
    <script src="./vue.js"></script>
    <script>
        let arr = [
            { id: 1, name: '小羊肖恩', price: 44, num: 1, check: false },
            { id: 2, name: '小鲤鱼泡泡', price: 39, num: 1, check: false },
            { id: 3, name: '深海鳗鱼', price: 49, num: 1, check: false },
            { id: 4, name: '派大星', price: 22, num: 1, check: false },
            { id: 5, name: '鲸鱼', price: 36, num: 1, check: false },
        ];
        //阻止vue在启动时生成生产提示
        Vue.config.productionTip = false;
        //创建vue实例
        new Vue({
            el: '.root',
            data: function () {
                return {
                    arr: arr,
                    allCheck: false,
                }
            },
            methods: {
                jia(item) {
                    item.num = item.num + 1;
                },
                jian(item) {
                    item.num = item.num - 1;
                },
                changeCheck(){
                    this.arr.forEach(v => {
                        v.check=!this.allCheck;
                    });
                }

            },
            watch: {
                arr: {
                    deep: true,
                    handler(value) {
                        this.allCheck = value.every(v => v.check);
                    }
                }
            },
            computed:{
                allPrice(){
                    return this.arr.reduce((next,prev)=>{
                        console.log(next.check);
                        console.log(prev);
                        if(prev.check){
                            return next+prev.num*prev.price;
                        }else{
                            return next;
                        }
                    },0)
                }
            }
        })
    </script>
</body>

</html>